<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar :viewerSource="viewerSource" />
    <div class="tool-box-left-top">
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="relativeHeight" :max="10000" /></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="shadows">shadows</a-checkbox></div> -->
      <!-- <div class="select-box-wrapper"><select-box :options="sizeOptions" /></div> -->
    </div>
    <div class="tool-box-left-bottom"></div>
    <GlobeRotater showTime :startOnMount="false" :viewerSource="viewerSource" :clockOptions="clockOptions" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
// import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch } from 'vue';
// import { SelectBox, SliderBar } from '@components/widgets';
// import { G3V } from '@g3x';
import {MousePosition,viewerSettingSidebar,GlobeRotater} from '@g3x/g3v/ui';
import {viewerMixin} from '@mixins';
import merge from '@g3x/utils/merge';

export default defineComponent({
  name: 'globe', // 地球仪
  components: { viewerSettingSidebar, GlobeRotater, MousePosition },
  mixins: [viewerMixin],
  setup() {
    return {};
  },
  props: {},
  data() {
    return {};
  },
  computed: {
    clockOptions(){
      return {multiplier:1}
    }
  },
  watch: {},
  methods: {
    g3vOptionsGet(original) {
      // const g3vOptions = merge($g3vOptions, true);
      return original;
    },
    onViewerInited() {
      console.log('globe onViewerInited');
    },
    initEffects() {}
  }
});
</script>

<style lang="less"></style>
